<template>
  <div class="add-goods-container">
    <!-- 当前页面标题 -->
    <h1>新增商品</h1>
    <!-- 信息输入框 -->
    <el-form label-position="right" label-width="120px" class="ipt-box">
      <!-- 商品名 -->
      <el-form-item label="商品名">
        <el-input v-model="goodsName" type="text" maxlength="255" show-word-limit placeholder="请输入商品名"></el-input>
      </el-form-item>
      <!-- 商品价格 -->
      <el-form-item type="number" label="商品价格">
        <el-input-number v-model="goodsPrice" :min="0" :max="99999999.99" placeholder="请输入商品价格" class="number-ipt"></el-input-number>
      </el-form-item>
      <!-- 商品运费 -->
      <el-form-item type="number" label="商品运费">
        <el-input-number v-model="goodsFreight" :min="0" :max="9999.99" placeholder="请输入商品运费" class="number-ipt"></el-input-number>
      </el-form-item>
      <!-- 商品库存数量 -->
      <el-form-item type="number" label="商品库存数量">
        <el-input-number v-model="goodsCount" :min="0" :max="999999" placeholder="请输入商品库存数量" class="number-ipt"></el-input-number>
      </el-form-item>
      <!-- 商品类别 -->
      <el-form-item type="number" label="商品类别">
        <el-select v-model="goodsCategory" placeholder="请选择商品类别"  class="select-ipt">
          <el-option
            v-for="item in goodsCategorys"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 商品参数个数 -->
      <el-form-item type="number" label="商品参数个数">
        <el-input-number v-model="goodsParamCount" :min="0" :max="20" placeholder="请输入商品参数个数" class="number-ipt"></el-input-number>
      </el-form-item>
      <!-- 商品参数 -->
      <el-form-item type="number" label="商品参数" v-for="(goodsParam, index) in goodsParams" :key="index">
        <el-select v-model="goodsParam.paramCategory" placeholder="请选择商品参数类别"  class="select-text-ipt">
          <el-option
            v-for="goodsParamCategory in goodsParamCategorys"
            :key="goodsParamCategory.value"
            :label="goodsParamCategory.label"
            :value="goodsParamCategory.value">
          </el-option>
        </el-select>
        <el-input v-model="goodsParam.param" type="text" maxlength="255" show-word-limit class="select-text-ipt" placeholder="请输入商品参数"></el-input>
      </el-form-item>
    </el-form>
    <!-- 上传商品图片 -->
    <div class="ipt-box">
      <van-uploader v-model="fileList" multiple :max-count="3" :preview-size="150" class="add-img-btn">
        <van-button icon="plus" type="primary">上传商品图片</van-button>
      </van-uploader>
    </div>
    <!-- 上传商品信息按钮 -->
    <div class="up-btn-box">
      <el-button round class="up-btn" @click="up">上传商品信息</el-button>
    </div>
  </div>
</template>

<script>
import { Uploader } from 'vant'

export default {
  name: 'AddGoods',
  components: {
    [Uploader.name]: Uploader,
  },
  data() {
    return {
      goodsName: '', // 商品名
      goodsPrice: 0, // 商品价格
      goodsFreight: 0, // 商品运费
      goodsCount: 0, // 商品库存数量
      goodsCategory: '', // 商品类别
      // 商品有哪些类别
      goodsCategorys: [],
      // 商品参数类别
      goodsParamCategorys: [],
      // 商品参数个数
      goodsParamCount: 0,
      // 商品参数列表
      goodsParams: [
        // 商品参数类别，商品参数
        // { paramCategory: '', param: '' },
      ],
      fileList: [], // 商品图片
    }
  },
  watch: {
    // 监视goodsParamCount的变化
    goodsParamCount(newVal, oldVal) {
      // { paramCategory: '', param: '' },
      if (newVal > oldVal) {
        for (let i = 0; i < newVal-oldVal; i++) {
          this.goodsParams.push({ paramCategory: '', param: '' })          
        }
      }
      if (newVal < oldVal) {
        for (let i = 0; i < oldVal-newVal; i++) {
          this.goodsParams.pop()          
        }
      }
    }
  },
  methods: {
    // 上传商品数据
    up() {
      this.$toast.loading({message: '商品信息提交中...', forbidClick: true})
      this.req.post(
        'goods/add/',
        {
          goodsPrice: this.goodsPrice,
          goodsName: this.goodsName,
          goodsFreight: this.goodsFreight,
          goodsCount: this.goodsCount,
          goodsCategory: this.goodsCategory,
          goodsParams: this.goodsParams,
          fileList: this.fileList,
        }
      ).then((res)=>{
        let data = res.data
        if (data.mark === 1) {
          this.goodsName = ''
          this.goodsPrice = 0
          this.goodsFreight = 0
          this.goodsCount = 0
          this.goodsCategory = ''
          this.goodsParamCount = 0
          this.goodsParams = []
          this.fileList = []
          this.$toast.success(data.message)
        } else {
          this.$toast.fail(data.message)
        }
      }, err=>{
        this.$toast.fail(err)
      })
    }
  },
  created() {
    this.goodsCategorys = this.goodsConstants.goodsCategorys
    this.goodsParamCategorys = this.goodsConstants.goodsParamCategorys
  }
}
</script>

<style lang="less" scoped>
// 容器样式
.add-goods-container {
  // height: 100vh;
  padding: 2rem;
  background-color: #eee;
}
// 标题样式
h1 {
  width: 8rem;
  margin: 0 auto 2rem;
  font-size: 2rem;
  font-weight: 500;
}
// 输入框列表样式
.ipt-box {
  width: 60%;
  margin: 0 auto;
  // 文本输入框样式
  .ipt {
    display: inline-block;
    width: 71%;
  }
  // 数字输入框样式
  .number-ipt {
    width: 100%;
  }
  .select-ipt {
    width: 100%;
  }
  .select-text-ipt {
    width: 50%;
  }
}
// 添加图片按钮样式
.add-img-btn {
  margin: 0 0 0 120px;
}
// 上传商品信息按钮样式
.up-btn-box {
  width: 60%;
  margin: 2rem auto 4rem;
  // padding: 0 0 0 120px;
  .up-btn {
    width: 100%;
  }
}
</style>